<template>
  <div>
    <el-card class="box-card">
      <!-- 头部 -->
      <div class="content_top">
        <div style="width: 100%;height: 50px;line-height: 50px;border-bottom: 1px solid #E9E9E9;">
          <h3 style="margin-left: 30px;font-size: 20px;font-weight: 700;">单元管理</h3>
        </div>
        <div style="width: 100%;height: 100px;">
          <div style="width: 100%;height: 50px;line-height: 50px;font-size: 14px;margin-top: 10px;">
            <span style="margin-right: 10px;margin-left: 30px;">楼座</span>
            <el-select v-model="building" style="width: 200px;" placeholder="请选择楼栋">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.building"
                :value="item.id">
              </el-option>
            </el-select>
            <span style="margin-right: 10px;margin-left: 30px;">单元名称/编号</span>
            <el-input v-model="unit" style="width: 250px;margin-left: 20px;" placeholder="请输入"></el-input>
            <el-button style="margin-left: 100px;height: 30px;" type="primary" @click="queryUnitInfo">查询</el-button>
            <el-button style="margin-left: 20px;height: 30px;" @click="cleanUnit">重置</el-button>
          </div>
        </div>
      </div>
      <!-- 添加/修改单元信息弹出框 -->
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" style="margin-left: 25%;" label-width="100px" class="demo-ruleForm">
          <el-form-item label="楼座" prop="bid">
            <el-select v-model="ruleForm.bid" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.building"
                :value="item.id +','+item.building">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单元号" prop="unit">
            <el-input v-model="ruleForm.unit" style="width: 200px;"></el-input>
          </el-form-item>
          <el-form-item label="楼层数量">
            <el-input v-model="ruleForm.numberOfUnitFloors" style="width: 200px;"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 单元列表 -->
      <div class="content">
        <div style="width: 100%;height: 50px;overflow: hidden;margin-top: 10px;">
          <p style="margin: 15px 0 0 40px;float: left;">单元列表</p>
          <el-button style="float: right;height: 35px;margin-top: 8px;margin-right: 2%;" @click="batchDel">批量操作</el-button>
          <el-button type="primary" @click="openWindows" style="float: right;height: 35px;margin-top: 8px;margin-right: 20px;" icon="el-icon-plus">新增</el-button>
        </div>
        <div style="width: 100%;height: 100%;margin-top: 10px;">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 95%;margin: 0 auto;text-align: center;"
            @selection-change="handleSelectionChange">
            <el-table-column
              fixed
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="building"
              label="楼座"
              width="120">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单元名称"
              width="140">
            </el-table-column>
            <el-table-column
              prop="completionTime"
              label="建成日期"
              width="200">
            </el-table-column>
            <el-table-column
              prop="unitNumber"
              label="单元编号"
              width="150">
            </el-table-column>
            <el-table-column
              prop="numberOfUnitFloors"
              label="楼层数量"
              width="130">
            </el-table-column>
            <el-table-column
              prop="back"
              label="备注"
              width="210">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="140">
              <template slot-scope="scope">
                <el-button @click="updateUnitInfo(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="delUnitInfo(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-left: 25%;margin-top: 10px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage4"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="1"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'SmartPropertyVueWorkbench',

  data() {
    return {
      building: '',
      unit: '',
      options: [],
      title: '',
      ruleForm: {
        unit: '',
        bid: '',
        unitNumber: '',
        numberOfUnitFloors: '',
        back: ''
      },
      rules: {
        bid: [
          { required: true, message: '请选择楼栋', trigger: 'blur' }
        ],
        unit: [
          { required: true, validator: this.validateTitle, trigger: 'blur' }
        ]
      },
      units: '',
      tableData: [],
      multipleSelection: [],
      total: 0,
      currentPage4: 1,
      pageRequest: { // 分页请求参数
        pageNum: 1, // 当前页
        pageSize: 10 // 每页多少条数据
      },
      dialogFormVisible: false
    }
  },

  mounted() {
    this.queryUnitInfo()
    this.listBuilding()
  },

  methods: {
    queryUnitInfo(){
      this.$axios.get('/memberCjq/unit/queyUnitInfo', {
        params: {
          bid: this.building,
          unit: this.unit,
          cid: window.sessionStorage.getItem('vid'),
          pageNum: this.pageRequest.pageNum,
          pageSize: this.pageRequest.pageSize
        }
      }).then(res => {
        if (res.status === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    listBuilding(){
      this.$axios.get('/memberCjq/building/queryBuildingInfo', {
        params: {
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        this.options = res.data.obj.content
      })
    },
    validateTitle (rules, value, callback) { // 判断单元名称是否重复
      if (!value) {
        callback(new Error('请输入单元名称'))
      } else {
        this.$axios.get('/memberCjq/unit/listUnit', {
          params: {
            unit: value,
            bid: this.ruleForm.bid.split(',')[0]
          }
        }).then(res => {
          if(value != this.units){
            if (res.data.obj.flag) {
              callback(new Error('单元名称已存在!'))
            } else {
              callback()
            }
          }
        })
      }
    },
    openWindows () { // 打开添加单元弹出框
      this.ruleForm = {
        unit: '',
        bid: '',
        numberOfUnitFloors: '',
        back: ''
      }
      this.listBuilding()
      this.title = '添加单元信息'
      this.dialogFormVisible = true
    },
    updateUnitInfo(obj){ // 打开修改单元弹出框
      this.ruleForm = JSON.parse(JSON.stringify(obj))
      this.ruleForm.bid = obj.bid +','+ obj.building
      this.units = obj.unit
      this.title = '修改单元信息'
      this.dialogFormVisible = true
    },
    submitForm(formName) { // 添加/修改单元信息
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.unitNumber = this.ruleForm.bid.split(',')[1]
          this.ruleForm.bid = this.ruleForm.bid.split(',')[0]
          this.$axios.post('/memberCjq/unit/saveUnitInfo', this.ruleForm).then(res => {
            if (res.data.flag) {
              this.MyMessage('添加/修改成功!', 'success')
              this.dialogFormVisible = false
              this.queryUnitInfo()
              this.insertLog('添加/修改单元信息')
            }else{
              this.MyMessage('添加/修改失败！','warning')
            }
          })
        } else {
          console.log('error submit!!')
          this.MyMessage('系统报错!','error')
          return false;
        }
      });
    },
    delUnitInfo (obj) { // 删除单元信息
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberCjq/unit/delUnitInfo', {
          params: {
            id: obj.id
          }
        }).then(res => {
          if (res.data.flag) {
            this.insertLog('删除房屋信息')
            this.MyMessage('删除成功!', 'success')
            this.queryUnitInfo()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    batchDel () { // 批量删除房屋信息
      const ids = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.$axios.put('/memberCjq/unit/batchDel/'+ids).then(res => {
        if (res.data.flag) {
          this.MyMessage('批量删除成功!', 'success')
          this.queryUnitInfo()
        }
      })
    },
    cleanUnit(){
      this.unit = ''
      this.building = ''
      this.queryUnitInfo()
    },
    handleSelectionChange (val) { // 获取选中id
      this.multipleSelection = val
    },
    handleSizeChange(val) {
      this.pageRequest.pageSize = val
      console.log(`每页 ${val} 条`)
      this.queryUnitInfo()
    },
    handleCurrentChange(val) {
      this.pageRequest.pageNum = val
      console.log(`当前页: ${val}`)
      this.queryUnitInfo()
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    }
  }
}
</script>

<style scoped>
.box-card{
  height: 100%;
  margin: 10px;
  font-family: '微软雅黑';
}
.content_top{
  width: 100%;
  height: 120px;
  overflow: hidden;
  border: 1px solid #E9E9E9;
}
::v-deep(.el-input__inner){
  height: 30px;
}
::v-deep(.el-date-editor .el-range-separator){
  line-height: 22px;
}
::v-deep(.el-button){
  line-height: 0;
}
.content{
  width: 100%;
  height: 100%;
  border: 1px solid #E9E9E9;
  margin-top: 20px;
}
</style>